<template>
	<view class="home">
		<ty-tab-around :list="tabsList" :list-key="listKey" :active.sync="tabIndex" @click="changeTabs"
			lineColor="#1a1a1a">
		</ty-tab-around>
		<view class="padding-30  margin-lr-30 bg-ff radius-40 margin-bottom-40 bg-shadow" v-for="(item,index) in list"
			:key="index" @click="choseOrder(item.id,item.status)">
			<view class="flex align-center justify-between">
				<view class="ztbtn">桌游主题：{{item.rooms.theme}}</view>
				<view class="zt1" v-if="item.status==0">未开始</view>
				<view class="zt2" v-if="item.status==1&&item.order_status==0">进行中</view>
				<view class="zt3" v-if="item.status==1&&item.order_status==1">待支付</view>
				<view class="zt3" v-if="item.status==2">待支付</view>
				<view class="zt4" v-if="item.status==3">已完成</view>
				<view class="zt5" v-if="item.status==4">已取消</view>
			</view>
			<view class="flex align-center">
				<image :src="item.rooms.image_url" mode="" class="bjimg"></image>
				<view class="flex-one margin-left-30">
					<view class="text-32">{{item.shop.name}}</view>
					<view class="text-28 text-66 margin-top-5"><text class="text-red">￥{{item.unit_price}}/人/小时</text>
					</view>
					<view class="text-24 text-66 margin-top-5">{{item.rooms.title}}</view>
					<view class="text-24 text-66 margin-top-5" v-if="item.yw_time">已游玩时间：{{item.yw_time}}</view>
					<view class="flex align-center justify-between margin-top-5">
						<view class="text-24 text-99">{{item.rooms.capacity}}人</view>
						<view class="flex align-center">
							<view class="cuIcon-time text-66"></view>
							<view class="text-28 text-66 margin-left-10">{{item.timerange}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<ty-tab-bar :tabnumber="'2'"></ty-tab-bar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 标签显示字段值
				listKey: 'name',
				// 订单状态标签栏
				tabsList: [{
					name: '全部',
					index: 0
				}, {
					name: '未开始',
					index: 1
				}, {
					name: '进行中',
					index: 2
				}, {
					name: '待支付',
					index: 3
				}, {
					name: '已完成',
					index: 4
				}, {
					name: '已取消',
					index: 5
				}],
				tabIndex: 0,
				list: []
			}
		},
		onShow() {
			this.loadList()
		},
		methods: {
			changeTabs(e) {
				this.tabIndex = e.index
				this.loadList()
			},
			loadList() {
				var that = this
				that.rq.getData('order/order_list', {
					type: this.tabIndex == 0 ? '' : this.tabIndex - 1,
				}).then(res => {
					if (res.code == 1) {
						this.list = res.data
					}
				})
			},
			choseOrder(id, status) {
				if (status == 0 || status == 2 || status == 4) {
					uni.navigateTo({
						url: '/pages/board/orderdetail?id=' + id + '&type=1'
					})
				} else {
					uni.navigateTo({
						url: '/pages/board/orderdetail?id=' + id + '&type=2'
					})
				}
			}
		}

	}
</script>

<style>
	.home {
		width: 100%;
		min-height: 100vh;
		background: #fff;
		padding-bottom: 200rpx;
	}

	.bjimg {
		width: 226rpx;
		height: 226rpx;
		border-radius: 40rpx;
	}

	.ztbtn {
		/* width: 222rpx; */
		height: 46rpx;
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		border: 2rpx solid #111111;
		font-size: 24rpx;
		color: #111111;
		line-height: 46rpx;
		padding: 0 10rpx;
		margin-bottom: 20rpx;
	}

	.zt1 {
		width: 124rpx;
		height: 46rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		border: 2rpx solid #FF0000;
		font-size: 24rpx;
		color: #FF0000;
		line-height: 46rpx;
		text-align: center;
	}

	.zt2 {
		width: 124rpx;
		height: 46rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		border: 2rpx solid #00CB25;
		font-size: 24rpx;
		color: #00CB25;
		line-height: 46rpx;
		text-align: center;
	}

	.zt3 {
		width: 124rpx;
		height: 46rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		border: 2rpx solid #F2CE19;
		font-size: 24rpx;
		color: #F2CE19;
		line-height: 46rpx;
		text-align: center;
	}

	.zt4 {
		width: 124rpx;
		height: 46rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		border: 2rpx solid #111111;
		font-size: 24rpx;
		color: #111111;
		line-height: 46rpx;
		text-align: center;
	}

	.zt5 {
		width: 124rpx;
		height: 46rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		border: 2rpx solid #666666;
		font-size: 24rpx;
		color: #666666;
		line-height: 46rpx;
		text-align: center;
	}
</style>